<template>
	<public-view navType="other" navTitle="消息" :navShowIndex="true">
		<view class="content flex f-d-c">
			<view class="top-tab-view flex a-i-c">
				<block v-for="(item, index) in top_tab" :key="index">
					<view class="tab-item all-center" @click.stop="changeTab(item)" :class="top_tab_id === item.id?('active'+top_tab_id):'unactive'">
						{{item.name}}
						<block v-if="message_count && item.id === '2'">
							<view class="dig color-fff f-s-22 all-center" >
								{{message_count||""}}
							</view>
						</block>
						<block v-if="notice_count && item.id === '3'">
							<view class="dig color-fff f-s-22 all-center" >
								{{notice_count||""}}
							</view>
						</block>
					</view>
				</block>
			</view>
			<block v-if="top_tab_id === '1'">
				<view class="scroll-tab-box">
					<scroll-view scroll-x="true" class="scroll-view" :scroll-into-view="('a'+stab_id)" :scroll-with-animation="true">
						<view class="stab-item-box">
							<block v-for="(item, index) in stab_list" :key="index">
								<view @click="changeStab(item)" :id="('a'+stab_id)" class="item flex f-d-c a-i-c f-s-30" :class="stab_id === item.id?'color-333 f-w-b':'color-666'">
									{{item.name}}
									<view class="line" v-if="stab_id === item.id"></view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
				<view class="my-post-box" v-if="stab_id === '0'">
					<block v-for="(item, index) in sys_msg_list" :key="index">
						<circle-box @playVideo="playFullScreen" :showComment="false" :showDel="true" :showTop="true" :item="item"></circle-box>
					</block>
				</view>
				
				<view class="car-list" v-if="stab_id === '1' || stab_id === '2'">
					<block v-for="(item, index) in sys_msg_list" :key="index">
						<car-box @click="goToInfo(item)" :stab_id="stab_id" :showTop="true" :data="item"></car-box>
					</block>
				</view>
				<view class="car-list" v-if="stab_id === '3' || stab_id === '4'">
					<block v-for="(item, index) in sys_msg_list" :key="index">
						<carbox-other @downItem="goToCarInfo" :stab_id="stab_id" :showTop="true" :item="item"></carbox-other>
					</block>
				</view>
				<view class="car-list"  v-if="stab_id === '5' || stab_id === '6'">
					<block v-for="(item, index) in sys_msg_list" :key="index">
						<work-box :stab_id="stab_id" :showTop="true" :item="item"></work-box>
					</block>
				</view>
			</block>
			<block v-if="top_tab_id === '2'">
				<view class="msg-box-view">
					<block v-for="(item, index) in sys_msg_list" :key="index">
						<msg-box :iconType="item?.data?.icon?.value === 'comment'?'2':'1'" :item="item"></msg-box>
					</block>
				</view>
			</block>
			<block v-if="top_tab_id === '3'">
				<view class="msg-box-view">
					<block v-for="(item, index) in sys_msg_list" :key="index">
						<msg-box iconType="3" :item="item"></msg-box>
					</block>
				</view>
			</block>
		</view>
	</public-view>
	<view class="" v-if="show_video" style="width: 750rpx;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999;">
		<view class="video-mask">
			
		</view>
		<view class="color-fff" style="position: absolute;z-index: 100;right: 50rpx;" @click="closeVi" :style="{top:paddingTop}">
			关闭
		</view>
		<dom-video style="position: absolute;z-index: 10;" ref="playVideo" :src="video_src" :autoplay="true" :loop="false" :controls="true"></dom-video>
	</view>
</template>

<script>
	import circleBox from "@/components/myComponents/circleBox.vue"
	import carBox from "@/components/myComponents/carBox.vue"
	import carBoxOther from "@/components/myComponents/carBoxOther.vue"
	import workBox from "@/components/myComponents/workBox.vue"
	import msgBox from "@/components/myComponents/msgBox.vue"
	import {mapGetters,mapMutations} from "vuex"
	import {goTo} from "@/nav.js"
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	export default {
		components:{
			"circle-box":circleBox,
			"car-box":carBox,
			"carbox-other":carBoxOther,
			"work-box":workBox,
			"msg-box":msgBox,
			"dom-video":isDomVideo
		},
		data() {
			return {
				top_tab_id:'1',
				top_tab:[
					{
						id:'1',
						sender:1,
						name:"我发布的"
					},
					{
						id:'2',
						sender:1,
						name:"点赞/评论",
					},
					{
						id:'3',
						sender:0,
						name:"通知",
					}
				],
				stab_id:'0',
				stab_list:[
					{
						id:'0',
						name:"卡友圈"
					},
					{
						id:'1',
						name:"找车"
					},
					{
						id:'2',
						name:"找货"
					},
					{
						id:'3',
						name:"卖车"
					},
					{
						id:'4',
						name:"买车"
					},
					{
						id:'5',
						name:"招聘"
					},
					{
						id:'6',
						name:"找工作"
					}
				],
				sys_msg_list:[],
				page:1,
				sender:1,
				message_count:0,
				notice_count:0,
				video_src:"",
				show_video:false,
				paddingTop:0
			};
		},
		onLoad() {
			this.initNavBar()
		},
		onShow() {
			this.sys_msg_list = []
			this.page = 1
			if(this.top_tab_id === '1'){
				this.getMyPostList()
			}else{
				this.getSysMsgList()
			}
			this.setDetio()
		},
		onReachBottom() {
			this.page++
			if(this.top_tab_id === '1'){
				this.getMyPostList()
			}else{
				this.getSysMsgList()
			}
		},
		methods:{
			...mapMutations(["changeFindCarTab"]),
			initNavBar(){
				let sys = uni.getSystemInfoSync()
				this.paddingTop = sys.statusBarHeight+'px'
			},
			closeVi(){
				this.show_video = false
				this.$refs.playVideo.stop()
			},
			playFullScreen({url}) {
				// this.$refs[id][0].play()
				// console.log(this.$refs['fullScreen'+index])
				this.video_src = url
				this.show_video = true
				this.$refs.playVideo.play()
			  // var videoContext = uni.createVideoContext(id, this);
			  // videoContext.play();
			  // videoContext.requestFullScreen();
			},
			setDetio(){
				let that = this
				that.util.postRequest({
					url:"v1/user/unread"
				}).then(res=>{
					console.log(res)
					that.message_count = res.data.message
					that.notice_count = res.data.notice_count
				})
			},
			goToInfo(e){
				goTo({url:"/pages/findCar/info?id="+e.id})
			},
			goToCarInfo(item){
				this.$store.commit("changeSecondCarInfo",JSON.stringify(item))
				goTo({url:'/pages/secondCar/secondCarInfo?id='+item.id})
			},
			getMyPostList(){
				let that = this
				that.util.postRequest({
					url:"v1/user/content",
					data:{
						type:that.stab_id,
						page:that.page,
						rows:10
					}
				}).then(res=>{
					console.log(res)
					if(that.page === 1){
						that.sys_msg_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.sys_msg_list = that.sys_msg_list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				})
			},
			getSysMsgList(){
				let that = this
				that.util.postRequest({
					url:"v1/message/index",
					data:{
						sender:that.sender,
						page:that.page,
						rows:10
					}
				}).then(res=>{
					console.log(res)
					if(that.page === 1){
						that.sys_msg_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.sys_msg_list = that.sys_msg_list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				})
			},
			changeTab(item){
				this.top_tab_id = item.id
				this.sys_msg_list = []
				this.page = 1
				if(this.top_tab_id === '1'){
					this.getMyPostList()
				}else{
					if(item.sender !== undefined || item.sender !=="undefined"){
						this.sender = item.sender
						this.page = 1
						this.getSysMsgList()
					}
				}
			},
			changeStab(item){
				this.stab_id = item.id
				this.page = 1
				this.sys_msg_list = []
				this.getMyPostList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-box-view{
		width: 100%;
		padding: 0 10upx;
	}
	.my-post-box{
		width: 100%;
	}
	.car-list{
		width: 100%;
		padding: 0 28upx;
	}
	.scroll-tab-box{
		width: 100%;
		padding-left: 40upx;
		.scroll-view{
			width: 100%;
			white-space: nowrap;
			height: 74upx;
			.stab-item-box{
				width: 100%;
				display: inline-flex;
				.item{
					position: relative;
					line-height: 42upx;
					margin-right: 40upx;
					.line{
						width: 38upx;
						height: 6upx;
						background: #2567F3;
						position: absolute;
						bottom: -12upx;
					}
				}
			}
		}
	}
	.top-tab-view{
		width: 100%;
		padding: 32upx 40upx 44upx;
		.tab-item{
			padding: 10upx 24upx;
			line-height: 40upx;
			border-radius: 80upx;
			margin-right: 24upx;
			transition: all .1s linear;
			position: relative;
			.dig{
				background: red;
				position: absolute;
				right: -10upx;
				top: -10upx;
				border-radius: 50%;
				width: 30upx;
				height: 30upx;
			}
		}
		.unactive{
			background: #FCFDFD;
			color: #333333;
		}
		.active1{
			background: linear-gradient(270deg, #0E98E8 0%, #2567F3 100%);
			box-shadow: 0px 20upx 24upx rgba(37, 103, 243, 0.25);
			color: #FFFFFF;
		}
		.active2{
			background: linear-gradient(270deg, #EE8300 0%, #F32E2E 100%);
			box-shadow: 0px 20upx 24upx #FFC8C8;
			color: #FFFFFF;
		}
		.active3{
			background: linear-gradient(270deg, #EEBA00 0%, #EE8300 100%);
			box-shadow: 0px 20upx 24upx rgba(238, 131, 0, 0.25);
			color: #FFFFFF;
		}
	}
	.content{
		width: 750upx;
	}
	.video-mask{
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
</style>
